<template>
  <div v-loading="loading" class="addInformation">
    <div slot="content" class="card">
      <div class="title-button">
        <el-button type="primary" size="mini" :loading="savaLoading" @click="sava">下一步</el-button>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane name="categories" label="维护类目">
          <categories :form-date="formDate" :options="options" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import categories from '@/views/coi/schedule/components/categories.vue'
import { getCategory, queryTreeList, queryChannelTreeList, saveCategory, categoryCheck } from '@/api/coi/onlineTaskAPI/sku'
import bus from '@/utils/eventBus'
export default {
  name: 'AddInformation',
  components: {
    categories
  },
  data() {
    return {
      id: this.$route.query.idList,
      loading: false,
      activeName: 'categories',
      formDate: {
        categories: []
      },
      options: {},
      savaLoading: false,
      submitLoading: false
    }
  },
  created() {
    this.elementsInfo()
  },
  methods: {
    // element 渲染
    async elementsInfo() {
      try {
        this.loading = true
        const { result } = await getCategory({ id: this.id })
        if (result) {
          this.queryOptions(result)
          this.formDate.categories = result
        }
      } finally {
        this.loading = false
      }
    },
    queryOptions(result) {
      if (!result && !result.elements) return
      const shopArr = []
      const platformArr = []
      result.forEach((element) => {
        element.elements.forEach((item) => {
          if (item.shopCategoryFlag === 0) item.values = item.values.length ? item.values[0] : []
          item.shopCategoryFlag ? shopArr.push(item.channelId) : platformArr.push(item.channelId)
        })
      })
      this.unique(shopArr).forEach(async (channelId) => {
        const res = await queryTreeList({ channelId })
        this.$set(this.options, `${channelId}1`, res.result)
      })
      this.unique(platformArr).forEach(async (channelId) => {
        const res = await queryChannelTreeList({ channelId })
        this.$set(this.options, `${channelId}0`, res.result)
      })
    },
    unique(arr) {
      return Array.from(new Set(arr))
    },

    async sava() {
      try {
        this.savaLoading = true
        const data = JSON.parse(JSON.stringify(this.formDate))
        data.categories.forEach((elements) => {
          elements.elements.forEach((item) => {
            if (item.shopCategoryFlag === 0) item.values = item.values.length ? [item.values] : []
          })
        })
        const { result } = await saveCategory(data.categories)
        if (result) {
          this.goMakePage(this.id)
        }
      } finally {
        this.savaLoading = false
      }
    },
    closePage() {
      const route = this.$route
      window.setTimeout(() => {
        bus.$emit('closeTag', route)
      }, 5000)
    },
    // 路由跳转到制作页面
    async goMakePage(id) {
      const { result } = await categoryCheck({ id })
      if (!result) {
        return this.$message({
          type: 'warning',
          message: '请补充完整渠道类目信息再进入下一步！'
        })
      }
      this.closePage()
      const query = {
        id,
        type: 'edit'
      }
      this.$router.push({
        path: '/VendorUpDataCreationOnlineInfo_Vendor',
        query
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__content {
  height: calc(100% - 55px);
  overflow: auto;
}
.addInformation {
  padding-left: 10px;
  padding-top: 10px;
  height: 100%;
  .card {
    position: relative;
    .title-button {
      position: absolute;
      right: 20px;
      z-index: 999;
    }
    .el-tabs {
      height: 100%;
      .el-tabs__content {
        height: calc(100% - 55px);
        overflow: auto;
      }
    }
  }
}
</style>
